<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>就诊页面</title>
    <link rel="stylesheet" href="../admin/layui/css/layui.css" media="all">
    <script src="../admin/js/jquery.js"></script>
    <script src="../admin/layui-v2.4.5/layui/layui.js"></script>
    <link rel="stylesheet" href="../admin/css/dia-diagnosis1.css">
    <script src="../admin/js/module/diagnosis1.js"></script>
</head>
<div class="fastRes" style="display: none">
    <div class="register-info">
        <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
            <legend>挂号信息</legend>
        </fieldset>
        <div class="item">
            <label class="layui-form-label" style="size: 30px">姓名</label>
            <input id="set-name1" type="text" autocomplete="off"  placeholder="请输入姓名" class="input">
        </div>
        <div class="item">
            <label class="layui-form-label" style="size: 30px">年龄</label>
            <input id="set-age1" type="text" autocomplete="off"  placeholder="请输入年龄" class="input">
        </div>
        <div class="item">
            <label class="layui-form-label" style="size: 30px">民族</label>
            <input id="set-nation1" type="text" autocomplete="off"  placeholder="请输入民族" class="input">
        </div>
        <div class="item">
            <label class="layui-form-label" style="size: 30px">身份证号</label>
            <input id="set-remark1" type="text" autocomplete="off" placeholder="请输入身份证号" class="input">
        </div>
        <div class="item" >
            <label class="layui-form-label" style="size: 30px">联系方式</label>
            <input id="set-contact1" type="text" autocomplete="off"  placeholder="请输入联系方式" class="input">
        </div>
        <div class="item" >
            <label class="layui-form-label" style="size: 30px">科室</label>
            <select class="select-input" id="office-select1">

            </select>
        </div>
        <div class="item" >
            <label class="layui-form-label" style="size: 30px">性别</label>
            <select class="select-input1" id="sex-select1">
                <option value="1">男</option>
                <option value="0">女</option>
            </select>
        </div>
        <div class="item">
            <label class="layui-form-label" style="size: 30px">医生签字</label>
            <select id="set-user1" class="set-user">

            </select>
        </div>
        <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">选择日期</label>-->
        <!--<div class="layui-inline">-->
        <!--<input type="text" class="layui-input" id="test1">-->
        <!--</div>-->
        <!--</div>-->
        <hr>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">病情描述</label>
            <div class="layui-input-block">
                <textarea name="desc" id="rec-result1" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">诊断意见</label>
            <div class="layui-input-block">
                <textarea name="desc" id="rec-remark1" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="input-block">
            <button  class="register-button" id="register-submit2">保存</button>
            <button  class="register-button" id="register-clear2">重置</button>
            <button  class="register-button" id="register-back2">返回主页面</button>
        </div>
        <script>
            layui.use('laydate', function () {
                var laydate = layui.laydate;

                //执行一个laydate实例
                laydate.render({
                    elem: '#test1', //指定元素
                    trigger:'click'
                });
            });
        </script>
    </div>
</div>
<body>
<div id="total" >
<div class="oper">
    <select id="conven">

    </select>
    <button id="add">添加</button>
    <button id="fast">快速就诊</button>
</div>
    <fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
        <legend>基本信息</legend>
    </fieldset>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">挂号号码</label>
        <input id="set-num" type="text"  placeholder="请输入挂号号码" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">姓名</label>
        <input id="set-name" type="text"  placeholder="请输入姓名" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">年龄</label>
        <input id="set-age" type="text"  placeholder="请输入年龄" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">性别</label>
        <input id="set-sex" type="text"  placeholder="请输入性别" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">身份证号</label>
        <input id="set-id" type="text"  placeholder="请输入身份证号码" class="input">
    </div>
    <div class="item">
        <label class="layui-form-label" style="size: 30px">科室</label>
        <input id="set-office" type="text"  placeholder="请输入科室" class="input">
    </div>
    <div class="item">
       <label class="layui-form-label" style="size: 30px">医生签字</label>
       <select id="set-user" class="set-user">

       </select>
    </div>
<div class="yizhu">
      <hr>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">病情描述</label>
            <div class="layui-input-block">
                <textarea name="desc" id="rec-result" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
        <div class="layui-form-item layui-form-text">
            <label class="layui-form-label">诊断意见</label>
            <div class="layui-input-block">
                <textarea name="desc" id="rec-remark" placeholder="请输入内容" class="layui-textarea"></textarea>
            </div>
        </div>
    <div class="layui-form-item">
        <label class="layui-form-label">药品名称：</label>
        <div class="layui-input-block">
            <input type="text" name="medName" class="layui-input" id="fuzzy_search" oninput="template_choise(this)" value="" lay-verify="required">
            <div class="input-group selected_keywords"></div>
        </div>
    </div>
    <div class="layui-form-item">
        <label class="layui-form-label">药品数量：</label>
        <div class="layui-input-block">
            <input type="number" name="medNum" class="layui-input" id="mdc-num">
        </div>
    </div>
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">药品名称：</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="text" name="medName" class="layui-input" id="fuzzy_search1" oninput="template_choise(this)" value="" lay-verify="required">-->
            <!--<div class="input-group selected_keywords"></div>-->
        <!--</div>-->
    <!--</div>-->
    <!--<div class="layui-form-item">-->
        <!--<label class="layui-form-label">药品名称：</label>-->
        <!--<div class="layui-input-block">-->
            <!--<input type="text" name="medName" class="layui-input" id="fuzzy_search2" oninput="template_choise(this)" value="" lay-verify="required">-->
            <!--<div class="input-group selected_keywords"></div>-->
        <!--</div>-->
    <!--</div>-->

</div>
<div>
    <div class="input-block1">
        <button  class="register-button1" id="register-submit1">保存</button>
        <button  class="register-button1" id="register-clear10">重置</button>
        <button  class="register-button1" id="register-back1">返回主页面</button>
    </div>
</div>
</div>
<script>
    $(document).click(function(e){
        var _con = $('.selected_keywords'); // 设置目标区域
        if(!_con.is(e.target) && _con.has(e.target).length === 0){ // Mark 1
            // todo
            $(".selected_keywords").css("display","none")
        }
    });
    // 搜索选择功能
    function template_choise(obj) {

        // 判断输入框内容为空的时候
        if ($(obj).val().length == 0){
            $(".selected_keywords").css("display","none")
            var selected_keywords = $(".selected_keywords")
            selected_keywords.empty()
        }
        else {
            //获取setinterval的索引
            var index = window.setInterval(function () {
                // 获取输入框中的搜索关键字
                var serach_keywords = $(obj).val()
                var list_template = "<ul class='list-group'></ul>"
                //执行模糊查询功能，延迟200ms
                $.ajax({
                    type: "POST",
                    url: "/hospital/medicine/name",
                    contentType: "application/json; charset=utf-8",
                    data: JSON.stringify({
                        "keywords":serach_keywords}),
                    dataType: "json",
                    success: function (data) {
                        $(".selected_keywords").css("display", "block")
                        $(".selected_keywords").html(list_template)
                        $(".list-group").empty()
                        //判断是否存在搜索结果
                        if(data.code == 1) {
                            $.each(data.data, function (i, item) {
                                // var data_complte = item["name"] + "," + data["template_name"] + "," + data["template_desc"]
                                var html_style = "<a href='javascript:'><li class='list-group-item' onclick='choise_one_template(this)'>" + item.name + "</li></a>"
                                $(".list-group").append(html_style)
                                // alert("code"+1);
                            })
                        }
                        else if(data.code == "0"){
                            // alert("code"+0);
                            $(".list-group").append("<li class='list-group-item'>没有找到合适的结果</li>")
                        }
                        //清除当前interval
                        window.clearInterval(index)
                    },
                    fail: function () {
                        alert("查询失败")
                    }
                })
                // 延时200ms
            }, 200)
        }
    }
    //添加选择的模版到展示栏
    function choise_one_template(obj) {
        //获取选择的值
        var template_data = $(obj).text()
        // alert(template_data);
        $("#fuzzy_search").val(template_data);
        // $("#fuzzy_search1").val(template_data);
        // $("#fuzzy_search2").val(template_data);
        $(".selected_keywords").empty();
        // document.getElementById("fuzzy_search").text=template_data;

        // alert($("#fuzzy_search").val());
    }
</script>
</body>
</html>